<template>
  <div class="product">
    <div class="container-fluid">
      <!--   1行   -->
      <div class="row">
        <!--左边按钮组-->
        <div class="col-md-3">
          <van-badge :content="getSumCount" class="btn btn-default btn-block btn-primary">全部</van-badge>
          <van-badge v-for="v in getBtnArr" :content="getBtnBadge(v)" class="btn btn-default btn-block">{{ v }}</van-badge>
        </div>
        <!--右边商品列表-->
        <div class="col-md-9">
          <div v-for="(v,i) in prosArray">
            <h3>{{ v.name }}<span class="label label-primary pull-right">{{ v.price }}</span></h3>
            <button class="btn btn-success pull-right" @click="addCart(v)" >加入购物车</button>
            <!--清理浮动需要空容器-->
            <div class="clearfix"></div>
            <p>{{ v.desc }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState,mapGetters } from 'vuex'
import qs from 'qs';
export default {
  name: "Product",
  data(){
    return {
      prosArray:[]
    }
  },
  created() {
    //获取所有商品信息
    this.axios.get("/api1/allPros").then(response=>{
      this.prosArray=response;
    }).catch(error=>{
      console.log(error);
    });
  },
  computed:{
    //获得vuex的cartArray
    ...mapState([
      'cartArray'
    ]),
    //获得vuex的getters里获取所有购物车里的商品总和方法
    ...mapGetters([
      'getSumCount'
    ]),
    //通过商品数组遍历获得分类 利用set对象唯一性去重 然后重新构建成数组
    getBtnArr(){
      let prosBtnArr = [];
      this.prosArray.forEach(v=>{
        prosBtnArr.push(v.category);
      })
      return [...new Set(prosBtnArr)];
    },
    //在header组件加载时已经获取了购物车的数组 通过购物车数组遍历获取传入的分类统计
    getBtnBadge(){
      /*前端计算 通过回调函数的传参 用foreach去便利所有的商品*/
      return function(v){
        let sd = 0;
        this.$store.state.cartArray.forEach(b=>{
          if(b.category===v){
            sd = b.count;
          }
        })
        return sd;
      }
    }

  },
  methods:{
    /*添加商品到购物车*/
    addCart(product){
      /*发起axios请求发送添加商品请求*/
      this.axios.post("api1/addProduct", qs.stringify(product)
      ).then(response=>{
        if(response.msg==="ok"){
          /*服务器返回成功后刷新vuex里的cartArray*/
          /*重新从数据库获取cartArray*/
          // this.$store.dispatch('getCart');
          /*直接操作cartArray数组*/
          // this.$store.state.cartArray.push(product);
          this.$store.dispatch('addCart',product);
        }
      }).catch(error=>{
        console.log(error);
      })
    }
  }
}
</script>

<style scoped>

</style>